<template>
  <div>
    <!-- 查看详情弹框 -->
    <el-dialog
      :title="title + '模块'"
      :visible.sync="addModelShow"
      width="500px"
      :before-close="handleCloses"
      append-to-body
      :close-on-click-modal="false"
    >
      <div v-loading="listLoading">
        <el-row>
          <el-form ref="formInline" :model="formInline" label-width="80px">
            

            <el-form-item label="名称" label-width="100px" class="floatItem">
              <el-input
                v-model="formInline.name"
                class="el_ipt"
                placeholder="请输入名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="跳转链接" label-width="100px" v-if="displays" class="floatItem">
              <el-input
                v-model="formInline.url"
                class="el_ipt"
                :disabled="disabled"
                placeholder="请输入链接地址"
              ></el-input>
            </el-form-item>
            <el-form-item label="是否隐藏此项" label-width="100px" class="floatItem">
              <el-radio v-model="formInline.status" label="0">显示</el-radio>
              <el-radio v-model="formInline.status" label="1">隐藏</el-radio>
              <el-radio v-model="formInline.status" label="2">删除</el-radio>
              <p class="radio_span">选择隐藏后，功能入口将不在首页展示</p>
            </el-form-item>
            <el-form-item label="图片" label-width="100px" class="floatItem">
              <el-upload
                :action="httpurl + '/api/fileUpload'"
                list-type="picture-card"
                :file-list="imgData"
                :limit="1"
                name="file"
                accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
                :before-upload="beforeUpload"
                :on-success="handleSuccess"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" append-to-body>
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
              <p>请上传小余10M图片文件</p>
            </el-form-item>
          </el-form>

          <div class="primary">
            <el-button type="danger" @click="handleCloses" class="primaryIpt"
              >取 消</el-button
            >
            <el-button type="primary" @click="fromData" class="primaryIpt"
              >保 存</el-button
            >
          </div></el-row
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import bus from "../../assets/js/bus";
import https from "../../plugins/https";
export default {
  props: {
    addModelShow: {
      type: Boolean,
      default() {
        return false;
      },
    },
    uploadMenuInfoData: {
      type: Object,
    },
    uploadMenuInfoType: {
      type: Number,
    },
  },
  data() {
    return {
      displays: true,
      disabled: false,
      imgData: [],
      listLoading: false,
      dialogImageUrl: "",
      dialogVisible: false,
      coverPhotos: [],
      bgPhotos: [],
      radio: "",
      title: "",
      httpurl: this.GLOBAL.httpurl,
      formInline: {
        oemUid: localStorage.getItem("uid"),
        imgUrl: "",
        status: "",
        url: "",
        name: "",
        id: "",
      },
    };
  },
  watch: {
    addModelShow(n) {
      console.log(33, this.uploadMenuInfoData);
      console.log(this.uploadMenuInfoData.length);
      if (n === true) {
        this.resetFields();
      }
      this.title = this.uploadMenuInfoType == 1 ? "新增" : "编辑";
      if (this.uploadMenuInfoType == 1) {
        this.displays = true;
      } else {
        this.displays = false;
      }
    },
  },
  mounted() {
    console.log(555, this.eventShow);
  },
  methods: {
    resetFields() {
      console.log(77, this.uploadMenuInfoData.menuImg);
      if (this.uploadMenuInfoData.menuImg == undefined) {
        return;
      }
      this.formInline = {
        oemUid: localStorage.getItem("uid"),
        imgUrl: this.uploadMenuInfoData.menuImg,
        status: "",
        url: "",
        name: "",
        id: "",
      };
      this.imgData = [];
      if (this.uploadMenuInfoType == 1) {
        return;
      }
      console.log(99999000);
      this.formInline.imgUrl = this.uploadMenuInfoData.menuImg;
      this.formInline.status = this.uploadMenuInfoData.funStatus;
      this.formInline.url = this.uploadMenuInfoData.funUrl;
      this.formInline.name = this.uploadMenuInfoData.name;
      this.formInline.id = this.uploadMenuInfoData.id;

      let item = {
        url: this.uploadMenuInfoData.menuImg,
        filePath: this.uploadMenuInfoData.menuImg,
        id: this.uploadMenuInfoData.id,
      };
      this.imgData.push(item);
    },
    datasss(i) {
      this.radio = i;
    },
    handleCloses(done) {
      this.formInline = {
        oemUid: localStorage.getItem("uid"),
        imgUrl: "",
        status: "",
        url: "",
        name: "",
        id: "",
      };
      this.imgData = [];
      bus.$emit("addModelSuccess", { type: 2, show: false });
    },
    fromData() {
      if (this.formInline.imgUrl == "")
        return layer.open({
          content: "请上传图片",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });

      // if (this.formInline.url == '') return this.$notify({title: "错误",message: '请输入跳转链接',type: "error"});
      if (this.formInline.name == "")
        return layer.open({
          content: "请输入名称",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
      if (this.uploadMenuInfoType == 1) {
        var res = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
        var objExp = new RegExp(res);
        if (objExp.test(this.formInline.url) == false)
          return layer.open({
            content: "跳转链接应输入http或https开头",
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
      }
      if (this.formInline.status == "")
        return layer.open({
          content: "请选择是否隐藏",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });

      https.uploadMenuInfo(this.formInline).then((res) => {
        if (res.data.code !== "0000") {
          layer.open({
            content: res.data.msg,
            skin: "msg",
            time: 2, //1秒后自动关闭
          });
          return;
        }
        this.formInline = {
          oemUid: localStorage.getItem("uid"),
          imgUrl: "",
          status: "",
          url: "",
          name: "",
        };
        this.imgData = [];
        layer.open({
          content: res.data.msg,
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        bus.$emit("addModelSuccess", { type: 1, show: false });
      });
    },
    handleRemove(file, fileList) {
      this.formInline.imgUrl = "";
      this.imgData = [];
    },
    beforeUpload(file) {
      let islt1M = file.size / 1024 / 1024 < 1000;
      if (!islt1M) {
        layer.open({
          content: "图片尺寸限制为90 x 90，",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        return false;
      } else {
        const isSize = new Promise((resolve, reject) => {
          const width = 90;
          const height = 90;
          const _URL = window.URL || window.webkitURL;
          const img = new Image();
          img.onload = () => {
            const valid = img.width == width && img.height == height;
            valid ? resolve() : reject();
          };
          img.src = _URL.createObjectURL(file);
        }).then(
          () => {
            return file;
          },
          () => {
            layer.open({
              content: "图片尺寸限制为90 x 90",
              skin: "msg",
              time: 2, //1秒后自动关闭
            });
            // this.$notify({title: "错误",message: ,type: "error"});
            return Promise.reject();
          }
        );
        return isSize;
      }
    },
    handleSuccess(res, file, fileList) {
      console.log(77);
      this.imgData = [];
      this.formInline.imgUrl = res.data.filePath;
      let pl = { url: res.data.filePath };
      this.imgData.push(pl);
    },
    handlePictureCardPreview(file, fileList) {
      console.log(444, file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>
<style scoped>
.el_ipt {
  width: 300px;
}
.radio_span {
  font-size: 12px;
  color: #999;
}
.imgSpan {
  display: block;
  width: 145px;
  float: left;
  text-align: center;
  margin-right: 10px;
}
/deep/ .floatItem{
  float: none;
}
/deep/ .el-upload--picture-card{
  width: 90px !important;
  height: 90px !important;
  line-height: 90px;
}
/deep/ .el-upload-list__item{
  width: 90px;
  height: 90px;
}
.primary {
  width: 100%;
  text-align: center;
  margin-top: 42px;
}
.f12 {
  font-size: 12px;
  color: #999;
  margin-top: 10px;
}
.img {
  width: 100px;
  border: 1px solid red;
  display: block;
  position: relative;
  top: 0;
  z-index: 999;
}
.shopList {
  width: 100%;
  /* border-bottom: 1px solid #ccc; */
  line-height: 50px;
  font-size: 16px;
  /* height: 30px; */
  /* margin-bottom: 30px; */
}
/* /deep/ .el-dialog {
  height: 300px;
} */
.el-button {
  width: 100px;
}
</style>
